<template>
  <div class="sem">
    <h1>住院患者统计</h1>
    <!-- 选择日期 -->
    <div class="selectdate">
      <span class="dateTips">选择日期：</span>
      <el-date-picker
        @change="getDocterList"
        v-model="selectdate"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00']"
        :picker-options="pickerOptions1"
        :clearable="false"
      ></el-date-picker>
    </div>
    <!-- ECharts图表测试 -->
    <div class="Chartbox">
      <!-- 医生资源统计 -->
      <div id="doctorChart"></div>
      <!-- 病区资源统计 -->
      <div id="bingquChart"></div>
      <!-- 病种资源统计 -->
      <div id="bingzhongChart"></div>
      <!-- 有效资源统计 -->
      <div id="zhenduanChart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";

export default {
  created() {
    const start = new Date(new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000);
    const end = new Date(
      new Date().setHours(23, 59, 59, 59) - 24 * 3600 * 1000
    );
    this.selectdate = [start, end];
  },
  mounted() {
    // 后台获取最新数据
    this.getDocterList();
  },
  data() {
    return {
      // 时间选择器
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const start = new Date(new Date().toLocaleDateString());
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const start = new Date(
                new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000
              );
              const end = new Date(
                new Date().setHours(23, 59, 59, 59) - 24 * 3600 * 1000
              );
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      selectdate: "",
      doctorData: [],
      msgdata: [],
      bingquData: [],
      bingzhongData: [],
      // 有效资源统计
      youxiaoData: []
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    // 获取患者数量
    getDocterList() {
      var that = this;
      // 请求后台数据
      axios
        .post("api/sick", {
          // 开始时间
          $gte: that.base.dateFtt("yyyy-MM-dd hh:mm:ss", that.selectdate[0]),
          // 结束时间
          $lt: that.base.dateFtt("yyyy-MM-dd hh:mm:ss", that.selectdate[1])
        })
        .then(res => {
          // 每次获取清空this.doctorData
          this.doctorData = [];
          this.base.charts(res.data.data, "doctor", this.doctorData);
          // 病区患者
          let binghqu = [];
          res.data.data.forEach(item => {
            binghqu.push({ bingqu: item.doctor.split("/")[0] });
          });
          this.bingquData = [];
          this.base.charts(binghqu, "bingqu", this.bingquData);
          // 病种
          this.bingzhongData = [];
          this.base.charts(res.data.data, "zhenduan", this.bingzhongData);
          // 有效资源统计
          this.youxiaoData = [];
          this.base.charts(res.data.data, "status", this.youxiaoData);
          // 创建一个储存医生患者的数组
        })
        .then(() => {
          // echarts 图表执行 医生患者统计
          this.base.drawLine("doctorChart", "医生患者统计", this.doctorData, echarts);
          // 病区患者统计
          this.base.drawLine("bingquChart", "病区患者统计", this.bingquData, echarts);
          // 患者病种统计
          this.base.drawLine(
            "bingzhongChart",
            "患者病种统计",
            this.bingzhongData,
            echarts
          );
          // 有效无效
          this.base.drawLine(
            "zhenduanChart",
            "资源状态统计",
            this.youxiaoData,
            echarts
          );
        });
    }
  }
};
</script>
<style lang='stylus' scoped>
.selectdate {
  font-size: 16px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.Chartbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  >div {
    margin-top: 20px;
    border: 1px solid #000;
    width: 700px !important;
    height: 420px !important;
  }
}
</style>
